<template>
  <div class="container">
    <el-card class="box-card">
      <div class="box1">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input placeholder="根据文章标题搜索" v-model.trim="form.keyword"></el-input>
          </el-form-item>
          <el-form-item label="状态" class="condition">
            <el-select placeholder="请选择" v-model="form.state">
             <el-option
                 v-for="item in options"
                :key="item.value"
               :label="item.label"
               :value="item.value">
               </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clears">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="success" icon="el-icon-edit" size="small" @click="addDialog">新增技巧</el-button>
        </div>
      </div>
      <el-alert :title="titles" type="info" show-icon :closable="false"> </el-alert>
      <el-table :data="list" style="margin-top: 10px" fit>
        <el-table-column label="序号" type="index" prop="id" :index="indexMethod"  />
        <el-table-column label="文章标题" prop="title" min-width="200">
            <template #default="{ row }">
             {{ row.title }}
            <el-link :underline="false">
              <i
                class="el-icon-film"
                v-show="row.videoURL"
                @click="addVideo(row)"
                :style="{ color: 'blue' }"
              >
              </i>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"> </el-table-column>
        <el-table-column label="录入人" prop="username"  />
        <el-table-column label="录入时间" min-width="150" prop="createTime">
          <template #default="{row}">
           {{formateTime(row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
         <template #default="{row}">
          {{row.state ? '已启用' : '已禁用'}}
         </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
           <template #default="{row}">
            <el-button type="text" size="small" @click="openDialog(row.id)">预览</el-button>
            <el-button type="text" size="small" @click.native="addButtom(row)">
              {{row.state ? '禁用' : '启用'}}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="Boolean(row.state)"
              @click="editDialog(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="Boolean(row.state)"
              @click="delDialog(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
   </el-table>
       <el-pagination
       style="margin-top: 10px"
       background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="form.pagesize"
      :current-page="form.page"
      layout="->,  prev, pager, next,sizes, jumper"
      :total="total">
    </el-pagination>
    <preview  :dialogVisible="dialogVisible" @closeDialog="closeDialog" ref="addDepts" :nodeId="nodeId" />
    <articles :addDialogFn="addDialogFn" @closeDialogFn="closeDialogFn" ref="addFn" />
    </el-card>
     <div class="videos" v-if="lookMovie === true">
      <el-button icon="el-icon-error" circle @click="lookMovie = false"></el-button>
      <video :src="videoSrc" controls autoplay width="100%" height="100%">
        您的浏览器版本过低，请更新版本
      </video>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants.js'
import preview from '@/module-hmmm/components/articles-preview'
import articles from '@/module-hmmm/components/articles-add'

// 前台是否显示

export default {
  components: {
    preview,
    articles
  },
  data () {
    return {
      list: [],
      dialogVisible: false,
      addDialogFn: false,
      total: 0,
      titles: '',
      options: status,
      videoSrc: '',
      lookMovie: false,
      form: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      nodeId: 0,
      videoURL: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const res = await list({ page: this.form.page, pagesize: this.form.pagesize })
      this.form.page = +res.data.page
      this.form.pagesize = +res.data.pagesize
      this.list = res.data.items
      this.total = res.data.counts
      this.titles = `数据一共${this.total}条`
    },
    // 视频播放
    addVideo (row) {
      this.lookMovie = true
      this.videoSrc = row.videoURL
    },
    handleSizeChange (val) {
      // console.log(val)
      this.form.pagesize = val
      this.form.page = 1
      this.getList()
    },
    // 页面发生变化时触发该事件
    handleCurrentChange (val) {
      // console.log(val)
      this.form.page = val
      this.getList()
    },
    // 计算序号
    indexMethod (index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1
    },
    // 处理时间
    formateTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 清除输入框内容
    clears () {
      this.form.keyword = ''
      this.form.state = null
      this.getList()
    },
    // 搜索
    async search () {
      const { data } = await list({ keyword: this.form.keyword, state: this.form.state })
      // console.log(res)
      this.list = data.items
      this.total = data.counts
      this.form.page = 1
      this.form.page = +data.page
      this.form.pagesize = +data.pagesize
      this.titles = `数据一共${this.total}条`
      // this.getList()
    },
    openDialog (id) {
      this.dialogVisible = true
      this.nodeId = id
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 修改状态
    async addButtom (data) {
      // console.log(data.state)
      data.state = data.state ? 0 : 1
      await changeState(data)
      this.$message.success('修改成功')
    },
    addDialog () {
      this.addDialogFn = true
      this.$refs.addFn.titleFn = '新增技巧'
    },
    closeDialogFn () {
      this.addDialogFn = false
    },
    // 修改
    editDialog (data) {
      // console.log(data)
      this.addDialogFn = true
      this.$refs.addFn.titleFn = '修改技巧'
      this.$nextTick(() => {
        this.$refs.addFn.preview(data)
      })
    },
    // 删除
    delDialog (id) {
      this.$confirm('你确定要删除吗', '提示', { type: 'warning' }).then(async () => {
        await remove(id)
        this.$message.success('删除成功')
        if (this.list.length === 1 && this.form.page > 1) {
          this.form.page--
        }
        this.getList()
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 0 10px;
  margin: 10px 0;
}

.box1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.condition {
  margin-left: 30px;
}

.videos {
  width: 800px;
  height: 500px;
  left: 400px;
  top: 550px;
  position: fixed;
  margin-top: -30%;
  z-index: 999;
}
.videos .el-button {
  display: flex;
  background-color: #000000;
  font-size: 20px;
  opacity: 0.3;
  margin: 0 auto;
  margin-top:10px ;
}
</style>
